<template>
	<view class="warp">
		<!-- 导航栏 -->
	<!-- 	<u-navbar :is-back="false">
			<view class="header">
				<view class="search-box" @click="$u.route('pages/search/search')">
					<u-search placeholder="输入关键字搜索" :show-action="false" :disabled="true" />
				</view>
			</view>
		</u-navbar> -->
		<!-- 下拉刷新容器 -->
		<pulldownRefresh ref="pulldownRefresh" :top="190" @refresh="refresh">
			
			<!-- 轮播图 -->
			<view class="slides-box">
				<u-swiper interval="5000" height="300" :list="slideList" title @click="clickBanner" mode="dot"
					indicator-pos="bottomRight" />
			</view>

			<view class="tab">
				<text>-达人专区-</text>
			</view>
			<!-- 分类文章列表 -->
			<view class="goods-list">
				<goodsItem v-for="item in articleList" :key="item.id" :item="item" />
			</view>
			<!-- 上拉加载 -->
			<u-loadmore :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50" @loadmore="loadMore" />
		</pulldownRefresh>
	</view>
</template>

<script>
	import pulldownRefresh from '@/components/pulldownRefresh.vue';
	import goodsItem from '@/components/goodsItem.vue';
	export default {
		components: {
			pulldownRefresh,
			goodsItem
		},
		data() {
			return {
				text1:'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				slideList: [],
				noticeList:[],
				categoryList: [],
				current: 0,
				currentCategory: {},
				page: 1,
				articleList: [],
				status: 'loading'
			};
		},
		onLoad(e) {
			this.current = e.current;
			this.getSlides();
			this.getCategoryArticleList();
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			refresh() {
				this.page = 1;
				this.articleList = [];
				this.getSlides();
				this.getCategoryArticleList();
			},
			loadMore() {
				if (this.status === 'loadmore') {
					this.getCategoryArticleList();
				}
			},
			// 获取文章分类
			getCategoryList() {
				this.$api.get({
					url: 'webapp/index/appIndex',
					data: {
						order: '+id',
						field: 'id,name'
					},
					success: res => {
						// console.log(res)
						if (res.code === "10001") {						
							this.categoryList = res.data.shopCategory;
							this.changeCategory(0);
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			// 切换分类
			changeCategory(index) {
				console.log(index)
				this.current = index;
				this.currentCategory = this.categoryList[index];
				this.page = 1;
				this.articleList = [];
				this.getCategoryArticleList();
			},
			// 获取分类下文章列表
			getCategoryArticleList() {
				this.status = 'loading';
				this.$api.get({
					url: 'portal/shop/gold_list',
					data: {
						id: this.currentCategory.id,
						page: `${this.page},10`, // 一页显示10条
						order: '-id',
						field: 'id,post_title,thumbnail,published_time,comment_count,post_hits'
					},
					success: res => {
						if (res.code === 1) {
							let articleList = res.data;
							this.articleList = this.articleList.concat(articleList);
							// 分页判断
							if (articleList.length < 10) {
								this.status = 'nomore';
							} else {
								this.status = 'loadmore';
								this.page++;
							}
						} else {
							this.$toast('数据获取失败');
						}
					},
					complete: () => {
						this.$refs.pulldownRefresh && this.$refs.pulldownRefresh
					.endPulldownRefresh(); // 停止刷新动画
					}
				});
			},
			// 获取轮播图
			getSlides() {
				this.$api.get({
					url: 'webapp/index/appIndex',
					success: res => {
						if (res.code == "10001") {
							this.slideList = res.data.gold_list;
						} else {
							this.$toast('数据获取失败');
						}
					}
				});
			},
			
			// 点击轮播图，跳转页面
			clickBanner(e) {
				this.$u.route(this.slideList[e].description);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.slides-box {
		margin: 0rpx 10rpx 0;
		/*  #ifdef MP  */
		margin-top: 78rpx;
		/*  #endif  */
	}
	.goods-list{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content:center;
	}
	.tab{
		background: #fff;
		border: 1px solid rgba(255, 255, 255, 0.4);
		box-sizing: border-box;
		height: 40px;
		line-height: 40px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.75rem;
	}
	.index_banner{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 20px 5px 5px 5px;
		background: #fff;
		background: #fff;
	}
	.index_banner image{
		width: 100%;
		height: 180px;
		}
	.img_top{
			height: 90px;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 5px 5px;
			background: #fff;
		}
		.img_top a{
			width: calc(50% - 2px);
		}
		.img_top image{
			width: 100%;
			height: 90px;
			border-radius: 6px;
		}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/*  #ifndef MP  */
		flex: 1; // 小程序不设置flex:1，避免被右上角的胶囊遮挡

		/*  #endif  */
		.logo {
			margin-left: 20rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		.search-box {
			flex-grow: 1;
			margin: 0 20rpx;
		}
	}

	.stick-top {
		position: fixed;
		top: 0;
		width: 750rpx;
		z-index: 999;
	}
</style>